import React from 'react';
// 受控组件；值由react控制的表单输入元素，就称之为受控组件

// 受控的写法，需要用state控制输入元素的value属性
// 需要一个叫做 onChange的方法 来变更state
class FromCom extends React.Component<any,any>{
    state = {
        val:'',
        sel:'2'
    }
    handleChange = (e:any) => {
        console.log(e.target.value);
        this.setState({
            val:e.target.value
        })
    }

    handleChange2 = (e:any) => {
        this.setState({sel:e.target.value})
    }
    render(): React.ReactNode {
        return(
            <fieldset>
                <legend>表单</legend>
                <input type="text" value={this.state.val} onChange={this.handleChange}/>
                <select value={this.state.sel} onChange={this.handleChange2}>
                    <option value="1">⚽</option>
                    <option value="2">🏀</option>
                    <option value="3">🏐</option>
                </select>
            </fieldset>
        )
    }
}

export default FromCom